import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';

let camera, scene, renderer;

initScene()
initAxesHelper()
initLight()
initMeshes()
initCamera()
initRenderer()
initControls()


animate()

window.addEventListener('resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
})

function initScene(params) {
    scene = new THREE.Scene()
    scene.fog = new THREE.Fog(0,250,1400)
}

function initAxesHelper(params) {
    scene.add(new THREE.AxesHelper(100))
}

function initLight(params) {
    const dirLight = new THREE.DirectionalLight(0xffffff, 0.125)
    dirLight.position.set(0, 0, 1).normalize();
    scene.add(dirLight);

    const pointLight = new THREE.PointLight(0xffffff, 1.5)
    pointLight.position.set(0, 100, 90)
    scene.add(pointLight);

    pointLight.color.setHSL(Math.random(),1,0.5)
}

function initMeshes(params) {
   //plane
    //简写不行的，高版本要报错
    // const plane = new THREE.MeshBasicMaterial(
    //     new THREE.PlaneGeometry(10000, 10000),
    //     new THREE.MeshBasicMaterial({
    //         color: 0xffffff,
    //         opacity: 0.5,
    //         transparent: true
    //     })
    // )
    const planeGeometry = new THREE.PlaneGeometry(10000, 10000);
    const planeMaterial = new THREE.MeshBasicMaterial({
        color: 0xffffff,
             opacity: 0.5,
             transparent: true
    })
    const plane = new THREE.Mesh(planeGeometry, planeMaterial)
    
    plane.position.y = -10;
    plane.rotation.x = -Math.PI / 2;
    scene.add(plane);


    //text
    const materials = [
        new THREE.MeshPhongMaterial({
            color: 0xffffff, flatShading: true,
            side: THREE.DoubleSide
        }), //font
        new THREE.MeshPhongMaterial({color:0xffffff})  //side
    ]
    const loader = new FontLoader()
    loader.load('fonts/helvetiker_bold.typeface.json', function (font) {
        console.log(font);
        const geometry = new TextGeometry(
            'yuechen',
            {
                font: font,
                size: 50,
                height: 20,
                //控制曲线的平滑程度
                curveSegments: 2,
                //斜角厚度
                bevelThickness: 1.5,
                //是否给挤压的形状添加斜角
                bevelEnabled: true,
            }
        );
        geometry.computeBoundingBox();
        const xOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2;
        const textMesh1 = new THREE.Mesh(geometry, materials)
        textMesh1.position.set(-xOffset, 30, 0)
        scene.add(textMesh1)

        //倒影
        const textMesh2 = new THREE.Mesh(geometry, materials);
        textMesh2.position.set(-xOffset, -30, 0);
        textMesh2.rotation.x = Math.PI
        scene.add(textMesh2);
    })
}

function initCamera(params) {
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1500)
    camera.position.set(0, 250, 700)
    camera.lookAt(new THREE.Vector3(0, 0, 0))
}




function initRenderer(params) {
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
}

function initControls(params) {
    const controls = new OrbitControls(camera,renderer.domElement)
}

function animate(params) {
    requestAnimationFrame(animate)
    render()
}

function render(params) {
    renderer.render(scene, camera)
}